
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:components="http://java.sun.com/jsf/composite/components"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <h:head>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <h:outputScript library="js" name="bootstrap.min.js" />
        <h1 align="center">
            <h:outputText value="Domótica - ML SQ" class="label label-primary" />
        </h1>
    </h:head>

    <h:body>
        <components:navbar />
        <h:form id="hangManForm">
            <h:panelGrid id="panelPlayerSetup" columns="5" border="0" cellpadding="5" cellspacing="15" rendered="#{hangManBean.playerSetup}">
                <h:outputLabel id="lblPlayer1" value="#{messages.PLAYER1}" class="navbar-text" />
                <h:inputText id="player1" value="#{hangManBean.hangMan.player1}" size="15" requiredMessage="Obrigatório" required="true" class="form-control"/>
                <h:outputLabel id="lblPlayer2" value="#{messages.PLAYER2}" class="navbar-text" />
                <h:inputText id="player2" value="#{hangManBean.hangMan.player2}" size="15" requiredMessage="Obrigatório" required="true" class="form-control"/>
                <h:commandButton id="submit1" value="#{messages.CONTINUAR}" action="#{hangManBean.next}" class="btn btn-default" />
            </h:panelGrid>
            <h:panelGrid id="panelWordSetup" columns="5" border="0" cellpadding="5" cellspacing="15" rendered="#{hangManBean.nextStep}">
                <h:outputLabel id="lblChooseWord" value="#{messages.CHOOSE_WORD}" class="navbar-text" />
                <h:inputText id="wordToGuess" value="#{hangManBean.hangMan.wordToGuess}" size="30" requiredMessage="Obrigatório" required="true" class="form-control"/>
                <h:outputLabel id="lblTip" value="#{messages.TIP}" class="navbar-text" />
                <h:inputText id="tip" value="#{hangManBean.hangMan.tip}" size="50"  required="false" class="form-control"/>
                <h:commandButton id="submit2" value="#{messages.START}" action="#{hangManBean.startGame}" class="btn btn-default" />
            </h:panelGrid>



            <h:panelGroup rendered="#{hangManBean.hang}" > 
                <h:panelGrid id="panelAlphaBet" styleClass="table table-striped" columns="26" border="0" cellpadding="5" cellspacing="5">
                    <c:forEach items="#{masterBean.alphabetLetters}" var="item">
                        <h:commandLink action="#{hangManBean.getLetter}" value="#{item}" >
                            <f:param name="letter" value="#{item}" />
                        </h:commandLink>
                    </c:forEach>
                </h:panelGrid>
                <h:panelGrid id="panelAnswer" columns="#{hangManBean.hangMan.wordSize}" border="0">
                    <c:forEach items="#{hangManBean.hangMan.wordToGuessArr}" var="letter">
                        <h:outputText id="#{letter}" value="" class="form-control"/>
                    </c:forEach>
                </h:panelGrid>
                <h:panelGrid id="panelhangManImg" columns="1" border="0">
                    <h:graphicImage id="image" library="images" name="#{hangManBean.image}" />					
                </h:panelGrid>
            </h:panelGroup>

        </h:form>
    </h:body>

</html>